<template>
    <el-table :data="data" stripe :style="style">
        <el-table-column v-for="(item, key) of columns" :prop="item.field" :label="item.name" :width="item.width" :key="key">
            <template slot-scope="scope" v-if="!item.field">
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="名称" label="名称"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "simple-table",
        props:{
            // option: {
            //     type: Object,
            //     default: () => {return {};}
            // },
            url: {
                type: [String, Array],
                required: true
            },
            method: {
                type: String,
                default: 'get'
            },
            where: {
                type: Object,
                default: () => {return {};}
            },
            style: {
                type: String,
                default: 'widht: 100%;'
            },
            columns: {
                type: Array,
                required: true
            }
        },
        data:function(){
            return {
                // url: '',
                // method: '',
                // where: '',
                // style: '',
                // field: [],
                data: [],
                total: 0
            }
        },
        // watch: {
        //     'option': function () {
        //
        //
        //     }
        // },
        methods:  {
            init() {
                // this.url = this.option.url;
                // this.method = this.option.method || 'get';
                // this.where = this.option.where || {};
                // this.style = this.option.style || 'width: 100%;';
                this.$store.dispatch('ajax', {url: this.url, method: this.method, data: this.where, succeed: (res) => {
                        this.data = res.rows;
                        this.total = res.total;
                    }
                });
            }
        },
        mounted: function () {
            this.init();
        }
    }
</script>

<style scoped>

</style>